<template>
    <div class="main">
        <el-card>
            <el-tabs v-model="type">
                <el-tab-pane label="砂锅用户" name="砂锅用户" />
                <el-tab-pane label="砂锅号用户" name="砂锅号用户" />
            </el-tabs>
            <el-tabs v-model="activeName" type="card" @tab-click="ChildrenUp">
                <el-tab-pane v-for="(name, label) in tab" :key="name" :label="label" :name="name" />
            </el-tabs>
        </el-card>
        <el-card>
            <keep-alive>
                <component
                    :is="activeName"
                    ref="now"
                    class="component"
                    :type="type"
                    @updata="SetPage"
                >
                    <h2 class="inline">图表</h2>
                </component>
            </keep-alive>
            <!-- <users v-model="tableData" :type="type"/> -->
        </el-card>
        <el-card>
            <h2>详细数据</h2>
            <el-table :data="tableData">
                <el-table-column v-for="(val,key) in header" :key="key" :prop="key" :label="key" />
            </el-table>
            <pag ref="pag" :total="total" @change="GetPage" />
        </el-card>
    </div>
</template>

<script>
import pag from '@/components/public/Pagination.vue'
// import property from './components/userStatistics/property'
// import vchartBar from './components/charts/vchartBar'

export default {
    components: {
        pag,
        vusers: () => import('./components/userStatistics/users.vue'),
        vproperty: () => import('./components/userStatistics/property'),
        vpicture: () => import('./components/userStatistics/picture'),
        vincrement: () => import('./components/userStatistics/increment'),
        vparticipation: () => import('./components/userStatistics/participation')
    },
    props: {
    },
    data () {
        return {
            activeName: 'vparticipation',
            type: '砂锅用户',
            tab: {
                用户存量: 'vusers',
                用户属性: 'vproperty',
                用户画像: 'vpicture',
                用户增长数: 'vincrement',
                用户参与度: 'vparticipation',
                第三方统计: 'div'
            },
            tableData: [],
            total: 0,
            pageNum: 1
        }
    },
    computed: {
        header () {
            const a = this.tableData
            return a ? a[0] : null
        }
    },
    watch: {
    },
    created () {
    },
    mounted () {
        window.vm = this
    },
    methods: {
        ChildrenUp ({ name }) {
            setTimeout(() => this.$refs.now.Update(), 60)
        },
        SetPage ({ pageSize, pageNum, total, tableData }) {
            console.log('图表->分页')
            this.tableData = tableData
            this.total = total
            this.$refs.pag.pageNum = pageNum
            this.$refs.pag.pageSize = pageSize
        },
        GetPage ({ pageSize, pageNum }) {
            console.log('分页->图表')

            this.$refs.now.query.pageNum = pageNum
            this.$refs.now.query.pageSize = pageSize
        }
    }
}
</script>
<style lang="stylus">
</style>
<style scoped lang="stylus">
.main
    >>> .el-tabs__nav-wrap::after
        height 0
    >>> .component
        & > :not(.chart)
            margin 5px 10px
            display inline-block
        .el-tabs
            vertical-align middle
            transform translateY(7px)

    >>> .inline
        display inline-block
        vertical-align middle
        margin 5px 10px
        span
            margin-right 5px
    >>> .flex
        margin-top 40px
        display flex
        flex-wrap wrap
        .item
            min-width 400px
            flex 1
    >>> .chart
        margin-top 40px
    >>> .el-select
        width 90px
.el-card
    margin-bottom 10px
    padding-bottom 20px
    &:first-of-type
        padding-bottom 0
.el-table
    padding 20px
    &::before
        height 0
h2
    padding 20px 0
    >>> &::before
        content ''
        padding-left 5px
        background #227BE3
        margin-right 10px
</style>
